<template>
	<view class="bill">
		<view class="bill-one">
			<view :class="current==item.name?'checked':''" v-for="item in list" :key="item.id"  @click="jump(item.name)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="bill-two">
			<view v-if="current=='黄金'">
			<view class="bill-list" v-for="(item,index) in billList" :key="index">
				<view class="list-one">
					<text >{{item.goldName}}</text>
				</view>
				<view class="list-two">
					<view class="te">
						<text>{{item.orderNo}}</text>
					</view>
					<view class="dist">
						<view>
						<text class="to">{{item.state}}</text>
						</view>
						<view>
						<text class="tt">{{item.goldTurnover}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>
		
		<view v-else-if="current=='活期'">
			<view class="bill-list" v-for="(item,index) in billList" :key="index">
				<view class="list-one">
					<text >{{item.currentName}}</text>
				</view>
				<view class="list-two">
					<view class="te">
						<text>{{item.orderNo}}</text>
					</view>
					<view class="dist">
						<view>
						<text class="to">{{item.state}}</text>
						</view>
						<view>
						<text class="tt">{{item.currentTurnover}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>
			
		<view v-else-if="current=='定期'">
			<view class="bill-list" v-for="(item,index) in billList" :key="index">
				<view class="list-one">
					<text >{{item.regularName}}</text>
				</view>
				<view class="list-two">
					<view class="te">
						<text>{{item.orderNo}}</text>
					</view>
					<view class="dist">
						<view>
						<text class="to">{{item.state}}</text>
						</view>
						<view>
						<text class="tt">{{item.regularTurnover}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>
			
		<view v-else-if="current=='基金'">
			<view class="bill-list" v-for="(item,index) in billList" :key="index">
				<view class="list-one">
					<text >{{item.fundName}}</text>
				</view>
				<view class="list-two">
					<view class="te">
						<text>{{item.orderNo}}</text>
					</view>
					<view class="dist">
						<view>
						<text class="to">{{item.state}}</text>
						</view>
						<view>
						<text class="tt">{{item.fundTurnover}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>	
			
		<view v-else-if="current=='全部'">
			
			<view class="bill-list" v-for="(item,index) in billList" :key="index">
				<view class="list-one">
					<text>{{item.currentName?item.currentName:item.fundName?item.fundName:item.goldName?item.goldName:item.regularName}}</text>
				</view>
				<view class="list-two">
					<view class="te">
						<text>{{item.orderNo}}</text>
					</view>
					<view class="dist">
						<view>
						<text class="to">{{item.state}}</text>
						</view>
						<view>
						<text class="tt">{{item.currentTurnover?item.currentTurnover:item.fundTurnover?item.fundTurnover:item.goldTurnover?item.goldTurnover:item.regularTurnover}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>	
			
		</view>
		
		
	</view>
</template>

<script>
	import {createNamespacedHelpers}from 'vuex';
	const{mapActions,mapState}=createNamespacedHelpers("gold");
	const{mapActions:mapAction,mapState:mapStat}=createNamespacedHelpers("current");
	const{mapActions:regularmapActions,mapState:regularmapState}=createNamespacedHelpers("regular");
	const{mapActions:fundActions,mapState:fundmapState}=createNamespacedHelpers("fund");
	const{mapActions:AllActions,mapState:AllmapState}=createNamespacedHelpers("all");
	export default {
		onLoad(){
			this.getAllorder();
		},
		data() {
			return {
				// getGold:{
				// 	pageNum:1,
				// 	pageSize:3,
				// 	userId:1,
				// },
				// allData:{
				// 	pageNum:1,
				// 	pageSize:3,
				// 	userId:1,
				// },
				
				list:[
					{id:1,name:"全部"},
					{id:2,name:"基金"},
					{id:3,name:"定期"},
					{id:4,name:"黄金"},
					{id:5,name:"活期"}
				],
				billList:[	
				],
				current:"全部"
			}
		},
		computed:{
			...mapState(['billLists']),
			...mapStat(['currentLists']),
			...regularmapState(['regularLists']),
			...fundmapState(['fundLists']),	
			...AllmapState(['AllLists']),
		},
		watch:{
			//黄金数组赋值
			billLists(newV,oldV){
				this.billList=newV;
				// console.log(newV)
			},
			//活期数字复制
			currentLists(ne,ol){
				this.billList=ne;
			},
			//定期数组复制
			regularLists(newz,old){
				this.billList=newz;
			},
			//基金数组赋值
			fundLists(newd,old){
				this.billList=newd;
			},
			//全部订单数据
			AllLists(newx,old){
				this.billList=newx;
			}
			
		},
		methods: {
			...mapActions(["findGoldbyId"]),
			...mapAction(['findCurrentbyId']),
			...regularmapActions(['findRegularbyId']),
			...fundActions(['findFundbyId']),
			...AllActions(['getAllorder']),
			 jump(na){
				this.current=na;
				if(na=="黄金"){
					this.findGoldbyId();
					// this.billList=this.billLists
					// console.log("sasas",this.billList)
				}else if(na=="活期"){
					this.findCurrentbyId({
					// pageNum:1,
					// pageSize:1,
					// userId:1,
				});
				}else if(na=="定期"){
					this.findRegularbyId({
					// pageNum:1,
					// pageSize:10,
					// userId:1,
				});
				}else if(na=="基金"){
				    this.findFundbyId({
					// pageNum:1,
					// pageSize:3,
					// userId:1,
				});
				}
				else {
					 this.getAllorder();
				}
			}
				
		
		}
	}
</script>

<style lang="scss" scoped>
	
.checked{
		color:#ff5869;
		font-weight:bold;
		border-bottom: 2px solid #ff5869;
	}
.bill{
	width:100%;
	height:100%;
	
	box-sizing: border-box;
	background-color: #fafafa;
	padding:30rpx;
	.bill-one{
		width:100%;
		height:50rpx;
		display: flex;
		justify-content: space-around;
	}
	.bill-two{
		width:100%;
		height:100%;
		
		.bill-list{
			width:100%;
			background-color: white;
			border-radius: 15rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			padding:20rpx;
			.list-one{
				font-size: 30rpx;
				
			}
		    .list-two{
				margin-top: 20rpx;
				display:flex;
				width:100%;
				height:50rpx;
				line-height: 50rpx;
				.te{
					width:50%;
				}
				// justify-content: space-between;
				>view:first-child {
					font-size: 24rpx;
					color:#bdbdbd
					// line-height:50rpx;
				}
				.dist{	
					width:50%;
					display:flex;
					justify-content: space-between;
				}
			}
			.to{
				font-size:30rpx;
				color:#bdbdbd
			}
			.tt{
				font-size:40rpx;
				color:#ff6170
				
			}
		}
	}
}
</style>
